<template>
  <div id="space-user-analyze">
    <a-card title="用户上传分析" style="width: 100%">
      <v-chart :option="options" style="height: 320px; max-width: 100%;" :loading="loading" />
      <template #extra>
        <a-space>
          <a-segmented v-model:value="timeDimension" :options="timeDimensionOptions" />
          <a-input-search placeholder="用户id查询" enter-button="搜索" @search="doSearch"/>
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, watchEffect} from 'vue'
import {getSpaceUserAnalyzeUsingPost} from '@/api/spaceAnalyzeController'
import { message } from 'ant-design-vue'
import VChart from "vue-echarts";
import "echarts";
import * as echarts from 'echarts/core'

interface Props {
  queryAll?: boolean
  queryPublic?: boolean
  spaceId?: number
}

const props = withDefaults(defineProps<Props>(), {
  // 默认为false，这样如果单独分析某空间只需要传spaceId
  queryAll: false,
  queryPublic: false,
})

// 接受图表数据
const dataList = ref<API.SpaceUserAnalyzeResponse[]>([])
const loading = ref<boolean>(true) // 默认为true，加载

const userId = ref<string>();
const timeDimension = ref<string>('day');
const timeDimensionOptions = [
  {
    label: '日',
    value: 'day',
  },
  {
    label: '周',
    value: 'week',
  },
  {
    label: '月',
    value: 'month',
  },
]

/**
 * 加载数据
 */
const fetchData = async () => {
  loading.value = true
  const res = await getSpaceUserAnalyzeUsingPost({
    queryAll: props.queryAll,
    queryPublic: props.queryPublic,
    spaceId: props.spaceId,
    timeDimension: timeDimension.value,
    userId: userId.value,
  })
  if (res.data.code === 0) {
    dataList.value = res.data.data ?? []
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  // 加载完毕结束加载状态
  loading.value = false
}

/**
 * 监听变量，改变时触发数据的重新加载
 * 只要有任何一个值发生变化，都会重新执行封装的函数
 */
watchEffect(() => {
  fetchData()
})

// 图表内容参数
const options = computed(() => {
  const periods = dataList.value.map((item) => item.period) // 时间区间
  const counts = dataList.value.map((item) => item.count) // 上传数量

  return {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0,0,0,0.7)', // 深色背景
      borderColor: '#535353',
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    xAxis: {
      type: 'category',
      data: periods,
      name: '时间区间',
      axisLine: {
        lineStyle: {
          color: '#666' // 轴线颜色
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '上传数量',
      axisLine: {
        lineStyle: {
          color: '#666' // 轴线颜色
        }
      }
    },
    series: [{
      name: '上传数量',
      type: 'line',
      data: counts,
      smooth: true,
      symbol: 'circle', // 数据点形状
      symbolSize: 8,    // 数据点大小
      itemStyle: {
        color: '#1890ff' // 数据点颜色
      },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 横向渐变
          {
            offset: 0,
            color: '#43cee0' // 起始颜色
          },
          {
            offset: 1,
            color: '#0a7ef1' // 结束颜色
          }
        ])
      },
      areaStyle: { // 区域填充渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 纵向渐变
          {
            offset: 0,
            color: 'rgba(115,187,255,0.6)' // 半透明浅蓝
          },
          {
            offset: 1,
            color: 'rgba(0, 80, 179, 0.1)' // 半透明深蓝
          }
        ])
      },
      emphasis: {
        focus: 'series',
        itemStyle: {
          color: '#fff',      // 高亮时点颜色
          borderColor: '#1890ff', // 高亮边框颜色
          borderWidth: 2
        }
      }
    }]
  }
})

/**
 * 提交搜索函数
 */
const doSearch = (value: string) => {
  userId.value = value;
}

</script>

<style scoped></style>
